window.addEventListener('load', function () {
    const prev = document.querySelector('.arrow-l');
    const next = document.querySelector('.arrow-r');
    const focus = document.querySelector('.focus');
    const ul = document.querySelector('.focus ul');
    const circle = document.querySelector('.circle');
    const focusWidth = focus.offsetWidth;
    // 1.鼠标经过轮播图模块, 左右按钮显示[关闭定时器], 离开隐藏左右按钮[启动定时器],
    focus.addEventListener('mouseover', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        window.clearInterval(timer);
        timer = null;       // 清除定时器变量, 释放变量
    })
    focus.addEventListener('mouseout', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        // 启动定时器
        timer = window.setInterval(function () {
            // 手动调用点击事件
            next.click();
        }, 2000);
    })

    // 2.动态生成小圆圈: 小圆圈个数要跟图片张数一致
    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');
        // 通过设置自定义属性, 点小圆圈添加一个索引号
        li.setAttribute('data-index', i);

        circle.appendChild(li);
        // 3.小圆圈的排他思想
        li.addEventListener('click', function () {
            // 排他思想
            exclusiveCircle(circle, i);

            // 5.点击小圆圈, 移动图片 当然移动的是ul
            // ul 的移动距离, 就是小圆圈的索引号 * 图片的宽度 注意是负值!

            var index = this.getAttribute('data-index');
            // 当我们点击了某个小li, 就要把这个li的索引号给num 和 circleCount
            num = index;
            circleCount = index;
            // console.log(focusWidth);
            // console.log(index);
            animate(ul, -index * focusWidth)
        })


    }
    // 2.1.让ol里面第一个小li设置类名为current
    circle.children[0].className = 'current';

    // 7.克隆第一张图片
    var firstNode = ul.children[0].cloneNode(true);
    ul.appendChild(firstNode);


    // 6.点击右侧按钮, 图片滚动一张
    let num = 0;
    // 控制小圆点的播放
    let circleCount = 0;
    // flag 节流阀 --> 控制轮播图按钮连续点击造成播放过快
    let flag = true;
    next.addEventListener('click', function () {
        if (flag) {
            // 关闭节流阀
            flag = false;
            // 如果走到了最后复制的一张图片, 此时我们的ul要快速将left改成0
            console.log(`circle.children.length - 1 : ${circle.children.length - 1}`)
            console.log(`ul.children.length - 1 : ${ul.children.length - 1}`)
            if (num === ul.children.length - 1) {
                ul.style.left = '0';
                num = 0;
            }
            num++;

            // 8.点击右侧按钮, 小圆圈跟随一起变化 可以在声明一个变量控制小圆圈的播放
            circleCount++;
            // 如果circle == 4 说明了走到我们克隆的这张图片了, 我们就复原
            if (circleCount === circle.children.length) {
                circleCount = 0;
            }
            // 排他思想
            exclusiveCircle(circle, circleCount);

            animate(ul, -num * focusWidth, function () {
                // 打开节流阀
                flag = true;
            })
        }

    })

    // 9.左侧按钮做法
    prev.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num === 0) {
                num = ul.children.length - 1;
                // -负值 ?, 如何理解
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;

            circleCount--;
            // 如果circle < 0 说明了第一张图片, 则小圆圈要改为第4个小圆圆 (index 3)
            if (circleCount < 0) {
                circleCount = circle.children.length - 1;
            }
            // 三元表达式写法
            // circleCount = circleCount < 0 ? circle.children.length - 1 : circleCount;
            // 排他思想
            exclusiveCircle(circle, circleCount);
            animate(ul, -num * focusWidth, function () {
                flag = true;
            })
        }

    })

    // 10.自动播放轮播图
    var timer = window.setInterval(function () {
        // 手动调用点击事件
        next.click();
    }, 2000);

    function exclusiveCircle(circle, circleCount) {
        // 先清除其余小圆圈的current类名
        for (let child of circle.children) {
            // 排他思想
            child.className = '';
        }
        // 留下当前的小圆圈current类名
        circle.children[circleCount].className = 'current';
    }

})
